<template>
	<view class="container">
		<view class="header">
			<image class="banner" :src="$wanlshop.oss(pageData.headerImage)" mode="widthFix"></image>
		</view>

		<view class="content">
			<view class="section">
				<view class="section-title">新品推荐</view>
				<view class="product">
					<view class="item">
						<image class="image" :src="$wanlshop.oss(productList[0].image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ productList[0].title }}</view>
							<view class="description">{{ productList[0].description }}</view>
							<view class="bottom">
								<view class="price">￥<span>{{ productList[0].price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="section">
				<!-- <view class="section-title">爆款推荐</view> -->
				<view class="wanl-you-like margin-bottom-sm" :style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }"></view>
				<view class="product" :class="productList.length > 1 ? 'grid-2' : ''">
					<view class="item" v-for="(item, index) in productList" :key="index">
						<view v-if="productList.length > 1" class="img-bg product-image"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image) + ')' }">
						</view>
						<image v-else class="image" :src="$wanlshop.oss(item.image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ item.title }}</view>
							<view class="description">{{ item.description }}</view>
							<view class="bottom">
								<view class="price">￥<span>{{ item.price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-title">其他单品</view>
				<view class="product">
					<view class="item">
						<image class="image" :src="$wanlshop.oss(productList[0].image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ productList[0].title }}</view>
							<view class="description">{{ productList[0].description }}</view>
							<view class="bottom">
								<view class="price">￥<span>{{ productList[0].price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<image class="banner" :src="$wanlshop.oss(pageData.footerImage)" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 页面数据
			pageData: {
				headerImage: '',
				footerImage: ''
			},
			// 商品列表
			productList: [
				{
					"id": 18,
					"shop_id": 1,
					"shop_category_id": "3",
					"category_id": 113,
					"brand_id": 3,
					"category_attribute": null,
					"title": "猫狗粮",
					"image": "/uploads/20240727/bf9e4fa35deed37534b13b527a6c7546.jpg",
					"images": [
						"/uploads/20240727/bf9e4fa35deed37534b13b527a6c7546.jpg"
					],
					"description": "好吃，健康",
					"flag": "",
					"stock": "payment",
					"content": "<p style=\"text-align: center;\"><img alt=\"4569936.jpg\" src=\"/uploads/20240727/1b09feaae61895be14e168759c019bbb.jpg\" width=\"2099\" height=\"29998\"><br></p>",
					"freight_id": 1,
					"grounding": 0,
					"specs": "single",
					"distribution": "false",
					"activity": "0",
					"activity_id": 0,
					"activity_type": "goods",
					"views": 25,
					"price": "199.00",
					"sales": 0,
					"payment": 0,
					"comment": 0,
					"praise": 0,
					"moderate": 0,
					"negative": 0,
					"like": 0,
					"weigh": 18,
					"createtime": 1722068104,
					"updatetime": 1722068104,
					"deletetime": null,
					"status": "normal",
					"service_id": null,
					"isLive": null,
					"shop": {
						"shopname": "官方自营店",
						"state": "2",
						"isself": 1,
						"city": "广东省/广州市/番禺区",
						"find_user": {
							"user_no": "568291347",
							"fans": 0
						}
					},
					"category": {
						"id": 113,
						"pid": 0,
						"name": "犬粮猫粮"
					}
				}
			],
			// 获取商品列表参数
			params: {
				search: '',
				sort: 'weigh',
				order: 'asc',
				page: 1,
				filter: {},
				op: {}
			},
		}
	},
	onLoad() {
		// 接收eventChannel事件
		let eventChannel = this.getOpenerEventChannel();
		// 判断对象长度
		if (Object.keys(eventChannel).length <= 0) {
			this.$wanlshop.msg('非法访问');
			setTimeout(() => {
				this.$wanlshop.on('/pages/index')
			}, 1000);
			return;
		}

		eventChannel.on('data', ({ activity, productList }) => {
			console.log('活动数据', activity)
			console.log('商品数据', productList)

			// 修改导航栏标题
			uni.setNavigationBarTitle({
				title: activity.row
			})

			// 插入页面数据
			// this.pageData = activity;

			// 插入商品数据
			this.productList = productList;
		});

		this.loadData(1,1)
		this.loadData(1,2)
	},
	methods: {
		loadData(id, page) {
			/* this.params.filter.category_id = id;
			this.params.type = 'goods';
			this.params.op.category_id = 'in';
			this.$api.get({
				loadingTip: '加载中',
				url: '/wanlshop/product/lists',
				data: this.params,
				success: res => {
					console.log('产品列表', res)

					this.goodsData = res.list.data;
				},
				loadingTip: '加载中'
			}); */
			this.$api.post({
				loadingTip: '加载中',
				url: `/wanlshop/product/hotsale?page=${page}`,
				success: res => {
					console.log('GET_Popular', res)
					res.data.forEach(item => {
						if (item.row == "活动页-头部") {
							this.pageData.headerImage = item.img_url;
						}
						if (item.row == "活动页-底部") {
							this.pageData.footerImage = item.img_url;
						}
					})
				}
			})
		},

	}
}
</script>

<style lang="scss">
page {
	background-color: #ffb70010;
}

.container {

	image {
		width: 100%;
		display: block;
	}

	.header,
	.footer {
		width: 100%;

		.banner {
			width: 100%;
		}
	}

	.content {
		padding: 30rpx 40rpx;
		width: 100%;

		.section {
			width: 100%;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.section-title {
				margin: 0 auto 30rpx;
				width: fit-content;
				font-size: 42rpx;
				font-weight: bold;
				background: linear-gradient(to right, #f64d01, #ffb700);
				-webkit-background-clip: text;
				color: transparent;
				position: relative;

				@mixin title {
					content: '';
					position: absolute;
					width: 50rpx;
					height: 6rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				&::before {
					@include title;
					left: -60rpx;
					background-color: #f64d01;
				}

				&::after {
					@include title;
					right: -60rpx;
					background-color: #ffb700;
				}
			}

			.product {
				width: 100%;

				.item {
					width: 100%;
					/* 解决nowrap宽度溢出问题 */
					min-width: 0;
					border-radius: 8rpx;
					overflow: hidden;
				}

				.product_content {
					width: 100%;
					padding: 26rpx;
					background-color: white;
					color: #3d3d3d;

					.title {
						width: 100%;
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.description {
						width: 100%;
						font-size: 24rpx;
						margin-bottom: 30rpx;
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						flex-wrap: wrap;
						gap: 8rpx;

						.price {
							color: red;
							font-size: 32rpx;

							span {
								font-size: 46rpx;
							}
						}

						.button {
							font-size: 30rpx;
							color: white;
							background-color: red;
							border-radius: 6rpx;
							padding: 16rpx 40rpx;
							line-height: 1;
						}
					}
				}

				&.grid-2 {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 24rpx;

					.product-image {
						width: 100%;
						padding-top: 100%;
						background-size: cover !important;
						background-position: center !important;
					}

					.product_content {
						width: 100%;

						.title {
							overflow: hidden;
							white-space: nowrap;
							font-size: 28rpx;
							margin-bottom: 8rpx;
						}

						.description {
							font-size: 22rpx;
							margin-bottom: 20rpx;
							overflow: hidden;
							white-space: nowrap;
						}

						.bottom {
							.price {
								font-size: 28rpx;
								width: 100%;

								span {
									font-size: 38rpx;
								}
							}

							.button {
								font-size: 20rpx;
								padding: 16rpx 40rpx;
							}
						}
					}
				}
			}
		}
	}

}
</style>
